<div layout="row" flex>
  <md-content class="md-padding" style="width: 100%;">
    <md-card ng-repeat="server in servers" style="width: 100%;">
      <!-- Include toolbar if the server is selected -->
      <div ng-if="server.id==selectedServer" ng-include src="'static/toolbar-server.html'"></div>
      <div ng-if="(selectedServer && server.id==selectedServer) || !selectedServer ">
        <md-card-content>
          <p ng-switch="server.state" class="sectionheader">
            <span ng-switch-when="Master" class="label label-primary">
              Master<label ng-if="server.isVirtualMaster==true">-VMaster</label> {{server.host}}:{{server.port}}
            </span>
            <span ng-switch-when="Suspect" class="label label-warning">
              Suspect<label ng-if="server.isVirtualMaster==true">-VMaster</label> {{server.host}}:{{server.port}}
            </span>
            <span ng-switch-when="SlaveErr" class="label label-warning">
              Slave Error<label ng-if="server.isVirtualMaster==true">-VMaster </label> {{server.host}}:{{server.port}}
            </span>
            <span ng-switch-when="StandAlone" class="label label-info">
              Standalone<label ng-if="server.isVirtualMaster==true">-VMaster </label> {{server.host}}:{{server.port}}
            </span>
            <span ng-switch-default class="label label-default">
              {{server.state}}<label ng-if="server.isVirtualMaster==true">-VMaster </label> {{server.host}}:{{server.port}}
            </span>
          </p>
        </md-card-content>
        <style>
          table {
            table-layout: fixed;
            width: 100%;


          }

          td {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        </style>

        <!-- Debugging output -->
        <md-card ng-if="processlist[server.id]">
          <div class="bootstrap-table">
            <div class="fixed-table-toolbar"></div>
            <div class="fixed-table-container" style="padding-bottom: 0px;">
               <div class="fixed-table-header" style="display: none;">
                  <table></table>
               </div>
               <div class="fixed-table-body" style="max-height: 30vh; overflow-y: auto;">
                  <table class="ng-isolate-scope table table-hover table-striped">
                     <thead>
                        <tr>
                           <th style="text-align: left; vertical-align: bottom; width: 4%; " data-field="id" tabindex="0">
                              <div class="th-inner ">Id</div>
                              <div class="fht-cell"></div>
                           </th>
                           <th style="text-align: left; vertical-align: bottom; width: 8%; " data-field="user" tabindex="0">
                              <div class="th-inner sortable both">User</div>
                              <div class="fht-cell"></div>
                           </th>
                           <th style="text-align: left; vertical-align: bottom; width: 8%; " data-field="host" tabindex="0">
                              <div class="th-inner sortable both">Host</div>
                              <div class="fht-cell"></div>
                           </th>
                           <th style="text-align: left; vertical-align: bottom; " data-field="db.String" tabindex="0">
                              <div class="th-inner sortable both">Db</div>
                              <div class="fht-cell"></div>
                           </th>
                           <th style="text-align: left; vertical-align: bottom; width: 10%; " data-field="command" tabindex="0">
                              <div class="th-inner sortable both">Command</div>
                              <div class="fht-cell"></div>
                           </th>
                           <th style="text-align: left; vertical-align: bottom; " data-field="time.Float64" tabindex="0">
                              <div class="th-inner sortable both">Time</div>
                              <div class="fht-cell"></div>
                           </th>
                           <th style="text-align: tlef; vertical-align: bottom; " data-field="state.String" tabindex="0">
                              <div class="th-inner sortable both">State</div>
                              <div class="fht-cell"></div>
                           </th>
                           <th style="text-align: true; vertical-align: bottom; width: 40%; " data-field="info.String" tabindex="0">
                              <div class="th-inner sortable both">Info</div>
                              <div class="fht-cell"></div>
                           </th>
                        </tr>
                     </thead>
                     <tbody>
                        <tr ng-repeat="process in processlist[server.id]">
                           <td style="text-align: left; vertical-align: bottom; width: 4%; ">{{process.id}}</td>
                           <td style="text-align: left; vertical-align: bottom; width: 8%; ">{{process.user}}</td>
                           <td style="text-align: left; vertical-align: bottom; width: 8%; ">{{process.host}}</td>
                           <td style="text-align: left; vertical-align: bottom; ">{{process.db.String}}</td>
                           <td style="text-align: left; vertical-align: bottom; width: 10%; ">{{process.command}}</td>
                           <td style="text-align: left; vertical-align: bottom; ">{{process.time.Float64}}</td>
                           <td style="text-align: tlef; vertical-align: bottom; ">{{process.state.String}}</td>
                           <td style="text-align: true; vertical-align: bottom; width: 40%; ">{{process.info.String}}</td>
                        </tr>
                     </tbody>
                  </table>
               </div>
               <div class="fixed-table-footer" style="display: none;">
                  <table>
                     <tbody>
                        <tr></tr>
                     </tbody>
                  </table>
               </div>
            </div>
         </div>
         <div class="clearfix"></div>
          <!-- <table bs-table-control="bsTableProcessList[server.id]"></table> -->
        </md-card>

        <!-- Dynamic table for each server -->

      </div>
    </md-card>
  </md-content>
</div>